<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #addToCart {
            position: fixed;
            left: 600px;
            cursor: pointer;
            width: 100px;
            height: 40px;
            line-height: 40px;
            border: 1px solid deeppink;
            text-align: center;
            color: deeppink;
            top: 800px;
        }
        
        #addToCart:hover {
            color: #fff;
            background-color: deeppink;
        }
        
        #shopCart {
            position: fixed;
            right: 0;
            top: 200px;
            color: red;
        }
        
        #shopNum {
            width: 60px;
            height: 25px;
            background: deeppink;
            color: black;
            text-align: center;
            line-height: 25px;
        }
        
        .active {
            width: 25px;
            height: 25px;
            background: skyblue;
            position: absolute;
        }
    </style>

</head>

<body>
    <div id="addToCart">
        添加到购物车
    </div>
    <div id="shopCart">
        购物车
        <p id="shopNum">0</p>
    </div>


</body>

</html>
<script>
    window.onload = function() {
        var btn = document.querySelector('#addToCart')
        var shopCart = document.querySelector('#shopCart')
        var shopNum = document.querySelector('#shopNum')
        var bdWidth = document.documentElement.clientWidth || document.body.clientWidth;
        btn.onclick = function(e) {
            var x1 = e.clientX,
                y1 = e.clientY,
                x2 = bdWidth - 200,
                y2 = 150,
                x3 = shopCart.offsetLeft,
                y3 = shopCart.offsetTop;

            var a = -((y2 - y3) * x1 - (x2 - x3) * y1 + x2 * y3 - x3 * y2) / ((x2 - x3) * (x1 - x2) * (x1 - x3));
            var b = ((y2 - y3) * x1 * x1 + x2 * x2 * y3 - x3 * x3 * y2 - (x2 * x2 - x3 * x3) * y1) / ((x2 - x3) * (x1 - x2) * (x1 - x3));
            var c = ((x2 * y3 - x3 * y2) * x1 * x1 - (x2 * x2 * y3 - x3 * x3 * y2) * x1 + (x2 * x2 * x3 - x2 * x3 * x3) * y1) / ((x2 - x3) * (x1 - x2) * (x1 - x3));
            // 创建运动元素、
            var div = document.createElement('div')
            div.classList.add('active');
            // 起始点在鼠标坐标
            div.style.left = x1 + 'px';
            div.style.top = y1 + 'px'
            document.body.appendChild(div)
                // 开始运动
            var left = x1;
            var top = y1;
            var timer = setInterval(() => {
                // left匀速增加，top抛物线坐标
                left += 10;
                top = a * left * left + b * left + c;
                div.style.left = left + 'px';
                div.style.top = top + 'px'
                if (left >= x3) {
                    // 运动结束
                    clearInterval(timer)
                    document.body.removeChild(div);
                    shopNum.innerHTML = Number(shopNum.innerHTML) + 1
                }
            }, 30)
        }
    }
</script>